import  React from 'react';
import './vertical_4.css';

class  Vertical_4 extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {datainfo}=this.props;
        return<div>
        { datainfo!=null&&datainfo.length>0?
    <div  className=" timeline-vertical-4">
            {
                datainfo.map((item,i)=>{
                let contentdata=item.content;
                let contentArr=contentdata.split(/\n/g);
                let count=0;
                i%2==1?count=1:'';
                return <div className={'timeline-datainfo num_'+i}>
                            <div className="timeline-img ">
                            </div>
                            <div className={"timeline-content  count_"+count}>
                                <div style={{height:'20px'}}>
                                    <div className="timeline-content-right"></div>
                                    <div className="timeline-content-info-date" title={item.timeline}>
                                        {item.timeline}
                                    </div>
                                </div>
                                <div className="timeline-content-info-title">
                                    <div style={{width:'100%'}}>
                                    {
                                        contentArr.map((item,i)=>{
                                            if(item==""){
                                                return <div style={{display:'block',height:'20px'}}></div>
                                            }
                                            return <div className={"wea-f12"} style={{display:'block',lineHeight:'19px'}}>{item}</div>
                                        })
                                    }
                                    </div>
                                </div>
                            </div>
                        </div>
                })
        }
    </div>
    :
    <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
    }
    </div>
    }
}

export default Vertical_4;